<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>有货</title>
	<link rel="stylesheet" type="text/css" href="./Public/Home/org/bootstrap-3.3.5-dist/css/bootstrap.min.css" />
	<!-- <script src="./Public/Home/org/bootstrap-3.3.5-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> -->
	<script type="text/javascript" src="./Public/Home/Js/jquery-1.8.2.min.js"></script>
	<link rel="stylesheet" href="./Public/Home/Swiper-3.3.1/dist/css/swiper.min.css">
	<script type="text/javascript" src="./Public/Home/Swiper-3.3.1/dist/js/swiper.jquery.min.js"></script>
	<script type="text/javascript" src="./Public/Home/Swiper-3.3.1/dist/js/swiper.min.js"></script>
	<link rel="stylesheet" href="./Public/Home/Css/index.css">
	<link rel="stylesheet" href="./Public/Home/Css/common.css">
	<script type="text/javascript" src="./Public/Home/Js/index.js"></script>
	<link rel="stylesheet" href="./Public/Home/Css/login.css">
	<!-- 注：这儿不能引用注册的css，不然会将这儿的样式给覆盖 -->
	<link rel="stylesheet" href="./Public/Home/Css/pay.css">
	<script type="text/javascript" src="./Public/Home/Js/pay.js"></script>
	<link rel="stylesheet" href="./Public/Home/Css/order.css">
	<script type="text/javascript" src="./Public/Home/Js/order.js"></script>
	<!-- 引入城市js -->
	<script type="text/javascript" src="./Public/Home/Js/area.js"></script>
	<script type="text/javascript">
		$(function(){
			//初始化方法
			area.init('area');
			//执行修改时候默认选中效果
			// area.selected("北京","北京","东城区")
		})
	</script>
</head>
<body>
<header>
	<div id="simple-header">
		<div id="simple-header">
			<div class="header-inner">
	<span class="logo">
		<a href=""><img src="./Public/Home/Images/logo/logo_e.png" alt=""></a>
	</span>
	<ul class="header-tool">
			<li id="Login">
			<span>Hi~</span>
			<a href="">3333</a>
			<a href="http://127.0.0.1/photo/shop/index.php?m=Home&c=Login&a=quit">退出</a>
		</li>
			<li class="tool-options">
			<span>
				<a href="">MY有货</a>
			</span>
			<i></i>
			<div class="tool-select">
				<a href="">我的收藏</a>
				<a href="">优惠券</a>
			</div>
		</li>
		<li>
			<a href="">订单中心</a>
		</li>
		<li>
			<a href="">帮助中心</a>
		</li>
		<li>
			<i class="logo-phone"></i>
			<a href="">400-8899-646</a>
		</li>
	</ul>
</div>
		</div>
	</div>
</header>
<article>
	<!-- 我的购物车 -->
	<div id="cart-all">
		<div id="cart-page">
		<!-- 进度条 -->
			<div class="cart-pag-line">
				<span></span>
				<!-- 这儿的进度条样式添加cart-cur -->
				<i></i>
				<span  class="cart-cur"></span>
				<i></i>
				<span></span>
			</div>
			<!-- 进度条提示 -->
			<div class="cart-pag-prompt">
				<span class="cart-prompt-left">查看购物车</span>
				<!-- 这儿 进度条的样式是添加cart-prompt-cur -->
				<span class="cart-prompt-cur">填写订单</span>
				<span class="cart-prompt-right">付款，完成购买</span>
			</div>
		</div>
	</div>
<!-- <form action="<?php echo U('PayPage/index')?>" method="post"> -->
	<!-- 添加地址 -->
	<div id="order-edit-main">
		<div class="order-title">
			<span>请填写并核对以下信息 </span>
			<a href=""></a>
		</div>
		<div class="order-address">
			<div class="address-show">
				<span>收货地址</span>
				<a class="order-address-show order-address-cur">[修改]</a>
				<a class="order-address-show">[不保存并关闭]</a>
			</div>
			<div class="new-address"> <!-- 选中的时候这儿添加背景样式 -->
				<input type="radio" name="address" id="" checked="">使用新地址
			</div>
		</div>
		<form action="javascript:;" method="post">
			<div class="add-address" url="<?php echo U('OrderPage/AjaxAddress')?>">
				<ul>
					<li>
						<a><span class="special">*</span>收货人姓名：</a>
						<input type="text" name="consignee" id="consignee">
						<span class="_info">请填写您的真实姓名，最多5个汉字</span>
					</li>
					<li>
						<a><span class="special">*</span>省市：</a>
						<select name="shen" id="area1"></select>
						<select name="shi" id="area2"></select>
						<select name="qu" id="area3"></select>
						<input type="text" name="juti" id="area4">
						<span class="_info">标'*'的为支持加急送的地区，请输入收货的详细地址</span>
					</li>
					<li>
						<a><span class="special">*</span>手机号码：</a>
						<input type="text" name="phone" id="phone">
						<span class="_info">填写正确手机号便于接收发货和收货通知</span>
					</li>
					<li>
						<a>固定电话：</a>
						<input type="text" name="area" id="text-area">
						<span class="line"></span>
						<input type="text" name="tell" id="text-phone">
						<span class="_info">如：010-12345678，固话和手机号至少填一项</span>
					</li>
					<li>
						<a>电子邮件：</a>
						<input type="text" name="e-mail" id="Email">
						<span class="_info">用来接收订单提醒邮件，便于您及时了解订单状态</span>
					</li>
					<li>
						<a>邮编：</a>
						<input type="text" name="postcode" id="postcode">
						<span class="_info">请填写准确的邮编，以确保商品尽快送达</span>
					</li>
				</ul>
				<button type="botton" class="btn btn-default _address-btn" id="address">下一步：选择支付及送货时间&nbsp;&nbsp;<span>▷</span></button>
			</div>
		</form>
		<script type="text/javascript">
			$(function(){
				$('#address').click(function(){
					var url = $('.add-address').attr('url');
					var consignee = $('#consignee').val();  //名字
					var address = $('#area1').val()+$('#area2').val()+$('#area3').val()+$('#area4').val(); 
					var phone = $('#phone').val();
					var tellPhone = $('#text-area').val()+$('#text-phone').val();
					var Email = $('#Email').val();
					var postcode = $("#postcode").val();
					$.ajax({
						type:'post',
						url:url,
						data:{consignee:consignee,address:address,phone:phone},
						dataType:'json',
						success:function(result){
							
						}
					})
				})
			})
		</script>
		<!-- 支付及送货时间 -->
		<div class="order-selection">
			<span>支付及送货时间</span>
			<ul>
				<li> 付款方式：<span>在线支付</span></li>
				<li>送货时间：<span>只工作日送货（双休日、节假日不送）</span></li>
				<li>送货前联系我：<span>否</span></li>
			</ul>
		</div>
		<!-- 选择快递 -->
		<div class="order-selection underline-none">
			<span>选择快递</span>
			<div class="express-list">
				<input type="radio" name="carriagegroup" id="" checked="checked" value="1"><span>普通快递：</span><span>运费 <a>￥10.00</a></span></br>
				<input type="radio" name="carriagegroup" id="" value="0"><span> 顺丰速运：</span><span>运费 <a>￥15.00</a>(仅支持顺丰可配送的地区)</span>
				<a class="order-note">注：配送会由于天气，交通等不可抗拒的客观因素造成您收货时间延迟，请您知悉</a>
				<a class="express-list-none">如您购买的商品为航空禁运品顺丰会用陆运的方式给你派送，预计3-5天送达，请您见谅</a>
			</div>
		</div>
		<!-- 支付金额 -->
	</div>
	<!-- 商品信息 -->
	<div id="pay-wapper">
		<div class="container goods-total">
			<div class="row clearfix">
				<div class="col-md-12 column">
					<table class="table table-bordered _table">
						<thead class="goods-title">
							<tr class="goods-num">
								<th style="width: 390px;">商品信息 </th>
								<th style="width: 120px;">单价(元)</th>
								<th style="width: 90px;">返YOHO币</th>
								<th style="width: 100px;">数量</th>
								<th >小计(元)</th>
								<th >商品金额(元)</th>
							</tr>
						</thead>
						<tbody>
							<!-- 这儿循环已添加的商品信息 -->
							<?php foreach ($goodsData as $v){?>
								<tr class="pay-wapper">
									<td  class="goods-check-info">
										<a href="" class="pay-pro-icon">
											<img src="<?php echo $v['pic']?>" alt="">
										</a>
										<p class="pay-pro-info">
											<a href="" class="goodsName" title="<?php echo $v['name']?>"><?php echo $v['name']?></a>
											<?php foreach ($v['size'] as $value){?>
											<span class="size-color">颜色：黑色  尺码：XL</span>
											<?php }?>
										</p>
									</td>
									<td  class="goods-check">￥<?php echo $v['price']?></td>
									<td  class="goods-check">0 个</td>
									<td  class="goods-check goods-number"><?php echo $v['num']?></td>
									<td  class="goods-check">￥<span><?php echo $v['xiaoji']?></span></td>
									<td  class="goods-check">￥<span><?php echo $v['xiaoji']?></span></td>
								</tr>
							<?php }?>
							<!-- 循环点 -->
							<tr class="pay-wapper">
								<td  colspan = "6">
								<!-- 左边 -->
									<div class="pay-wapper-left">
										<div class="botton-left-one">
											<span class="pay-botton-cur"></span>
											<span>索要发票</span>
										</div>
										<div class="voucher">
											<ul>
												<li>
													<label>发票抬头：</label>
													<input type="text" name="debit" id="">
												</li>
												<li>
													<label>发票类型：</label>
													<select name="debit-type" id="">
														<option value="">--请选择--</option>
														<option value="图书">图书</option>
														<option value="资料">资料</option>
														<option value="办公用品">办公用品</option>
														<option value="洗涤用品">洗涤用品</option>
													</select>
												</li>
											</ul>
										</div>
										<!-- 添加备注信息 -->
										<div class="botton-left-two">
											<span class="pay-botton-cur1"></span>
											<span>添加备注信息</span>
										</div>
										<div class="comment-info">
											<textarea name="remark" id="" cols="30" rows="5"></textarea>
											<h class="comment-info-declare">声明：备注中有关收货人信息、支付方式、配送方式、发票信息等购买要求一律以上面的选择为准，备注无效。</h>
											<span>是否打印价格</span>
											<span>
												<input type="radio" name="print" id=""value="1">是
												<input type="radio" name="print" id="" checked="checked" value="0">否（如：送朋友的商品可不打印价格哦！）
											</span>
										</div>
									</div>
									<!-- 右边 -->
									<div class="pay-wapper-right">
										<div class="pay-right">
											<a href="" class="back-coin"></a>
											<span>共返YOHO币：0个</span>
										</div>
										<div class="play-total">
											<span> 商品总价：+ ¥<span class="zongjia"><?php echo $total?> </span></span>
											<span class="carriage"> 运费：+ ¥<span class="carriage1">10.00</span> </span>
										</div>
										<div class="play-juan-pan">
											<span class="pay-juan-cur"></span>
											<span class="one">使用优惠券支付</span>
										</div>
										<div class="juan-display">
											<p class="strong">请选择您要使用的优惠券： </p>
											<p class="strong orange">(OUTLET商品除免邮券外不可使用优惠券)</p>
											<p class="strong orange">(订单中使用优惠券将不赠送商品返还的YOHO币)</p>
											<div class="is-select">
												<ul>
													<li class="no-color">
														<input type="radio" disabled="disabled" value="" name="juangroup">
														<label>新客专享券：满599减60（全品类）</label>
													</li>
													<li class="no-color">
														<input type="radio" disabled="disabled" value="" name="juangroup">
														<label>新客专享券：满399减40（全品类）</label>
													</li>
													<li>
														<input type="radio" value="" name="juangroup">
														<label>新客专享券：10元现金券（全品类）</label>
													</li>
													<li>
														<input type="radio" value="" name="juangroup" checked="">
														<label>直接输入优惠券码： </label>
														<input id="juancode" class="textbox" type="text">
													</li>
												</ul>
											</div>
											<span class="pay-cancel">取消</span>
											<span class="pay-sure">确定</span>
										</div>
										<div class="play-Yoho-pan">
											<span class="pay-juan-cur1"></span>
											<span class="one">使用YOHO币支付</span>
										</div>
										<div class="is-yuho-pan">
											<div class="use-yuho">
												使用YOHO币：<input type="text" name="" id="">个
												<p>
													您目前有YOHO币
													<a class="strong">0</a>
													个
												</p>
												<p class="errbitip red">您的YOHO币不足</p><!-- 该提示语是个隐藏域，只有当上面的那个p触发才显示 -->
												<span class="pay-yuho-cancel">取消</span>
												<span class="pay-yuho-sure">确定</span>
											</div>
										</div>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	<!-- 去付款 -->
	<div id="to-pay-total">
		<p>您需要实际支付金额：<a id="TotalPay"><?php echo $total?></a>元</p>
		<input type="submit" value="去付款">
		<!-- <a href="<?php echo U('PayPage/index')?>"><span>去付款</span></a> -->
	</div>
<!-- </form> -->
	<script type="text/javascript">
		$(function(){
			var total1 = $(".carriage1").html();
			var total2 = $(".zongjia").html();
			var total = parseFloat(total1) + parseFloat(total2);
			$("#TotalPay").html(total);
		})
	</script>
</article>
<footer>
	<div id="footer-top">
		<div class="footer-left">
			<div class="footer-float">
				<span class="iconfont rgbf"></span>
				<span class="red">100%</span>
				<span class="rgbf">品牌正品</span>
			</div>
			<div class="footer-float">
				<span class="iconfont rgbf fCenter"></span>
				<span class="red">7天</span>
				<span class="rgbf">无理由退换货</span>
			</div>
			<div class="footer-float">
				<span class="iconfont rgbf fRight"></span>
				<span class="red">便捷</span>
				<span class="rgbf">在线客服</span>
			</div>
			<div class="footer-right">
				<input type="text" name="" value=""  placeholder="订阅我们的邮件" id="foot-text">
				<a href="" id="footer-submit"></a> 
			</div>
		</div>
	</div>
	<div id="footer-center">
		<div class="footer-help">
			<ul class="clearfix">
				<li class="fix-left">
					<p>
						<span>新手指南</span>
					</p>
					<p>
						<a href="">注册登录</a>
					</p>
					<p>
						<a href="">选购商品</a>
					</p>
					<p>
						<a href="">订单支付</a>
					</p>
					<p>
						<a href="">收货退款</a>
					</p>
				</li>
				<li class="fix-left">
					<p>
						<span>会员中心</span>
					</p>
					<p>
						<a href="">YOHO币</a>
					</p>
					<p>
						<a href="">会员制度</a>
					</p>
					<p>
						<a href="">账户管理</a>
					</p>
					<p>
						<a href="">密码管理</a>
					</p>
				</li>
				<li class="fix-left">
					<p>
						<span>购物指南</span>
					</p>
					<p>
						<a href="">全球购专区</a>
					</p>
					<p>
						<a href="">尺码选择</a>
					</p>
					<p>
						<a href="">发票</a>
					</p>
					<p>
						<a href="">商品咨询</a>
					</p>
				</li>
				<li class="fix-left">
					<p>
						<span>支付方式</span>
					</p>
					<p>
						<a href="">在线支付</a>
					</p>
					<p>
						<a href="">货到付款</a>
					</p>
					<p>
						<a href="">优惠券</a>
					</p>
					<p>
						<a href="">YOHO币支付</a>
					</p>
				</li>
				<li class="fix-left">
					<p>
						<span>配送方式</span>
					</p>
					<p>
						<a href="">配送时间</a>
					</p>
					<p>
						<a href="">配送范围</a>
					</p>
					<p>
						<a href="">顺丰速运</a>
					</p>
					<p>
						<a href="">商品验收与签收</a>
					</p>
				</li>
				<li class="fix-left">
					<p>
						<span>售后服务</span>
					</p>
					<p>
						<a href="">退换货政策</a>
					</p>
					<p>
						<a href="">退换货流程</a>
					</p>
					<p>
						<a href="">退款方式与时效</a>
					</p>
					<p>
						<a href="">投诉与建议</a>
					</p>
				</li>
				<li class="fix-left">
					<p>
						<span>APP常见问题</span>
					</p>
					<p>
						<a href="">IPhone版</a>
					</p>
					<p>
						<a href="">Android版</a>
					</p>
					<p>
						<a href="">wap版</a>
					</p>
					<p>
						<a href="">IPAD版</a>
					</p>
				</li>
			</ul>
		</div>
	</div>
	<div id="footer-buttom">
		<div class="footer-link">
			<div id="footer-link-left">
				<a href=""><img src="./Public/Home/Images/content/13.png" alt="" class="pin1"></a>
				<a href=""><img src="./Public/Home/Images/content/14.png" alt="" class="pin2"></a>
			</div>
			<div id="footer-link-right">
				<p class="link-top">
					<a href="">返回首页</a>
					<span>|</span>
					<a href="">YOHO!BUY 有货</a>
					<span>|</span>
					<a href="">新力传媒</a>
					<span>|</span>
					<a href="">联系我们</a>
					<span>|</span>
					<a href="">商家入驻</a>
					<span>|</span>
					<a href="">隐私条款</a>
					<span>|</span>
					<a href="">友情链接</a>
				</p>
				<p class="link-buttom">
					 CopyRight © 2007-2016 南京新与力文化传播有限公司
					<a class="rbg6" target="_blank" href="http://www.miibeian.gov.cn/">苏ICP备09011225号</a>
					NewPower Co. 版权所有 经营许可证编号：苏B2-20120395 
				</p>
			</div>
		</div>
	</div>
</footer>
</body>
</html>